<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>聊天室</title>
  <link
    href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
    rel="stylesheet"
  />
  <style>
    #messages { height: 60vh; overflow-y: auto; }
  </style>
</head>
<body class="bg-gray-100">
  <div class="max-w-2xl mx-auto mt-6">
    <h1 class="text-3xl font-bold mb-4 text-center">简易聊天室</h1>

    <!-- 昵称输入 -->
    <div class="mb-2">
      <input
        id="username"
        class="border px-2 py-1 rounded"
        placeholder="输入昵称后回车"
      />
    </div>

    <!-- 在线列表 -->
    <p class="text-sm text-gray-600 mb-2">
      在线：<span id="onlineList">-</span>
    </p>

    <!-- 消息区 -->
    <ul id="messages" class="bg-white rounded p-2 shadow"></ul>

    <!-- 发送区 -->
    <form id="form" class="mt-2 flex">
      <input
        id="input"
        class="flex-1 border px-2 py-1 rounded"
        autocomplete="off"
        placeholder="输入消息，/w 昵称 内容 私聊"
      />
      <button class="ml-2 bg-blue-500 text-white px-4 py-1 rounded">发送</button>
    </form>
  </div>

  <script src="client.js"></script>
</body>
</html>